<template>
  <div id="home">
    <head-tabar></head-tabar>
    <el-container style="margin-top: 80px;height: 100%">
      <el-aside style="width: 250px;margin-left: 10px;border-radius: 5px">
        <div class="user">
          <!-- <el-avatar :size="50" 
                    :style="`background:${extractColorByName(name)}`"
                     style="width: 150px;height: 150px;margin-left: 50px;margin-top: 0px">
                     <div style="width: 150px;height: 150px;margin-top: 30%"> <a style="font-size: 200%;text-align: center;vertical-align:bottom">{{ name }}</a></div>
                    </el-avatar>
                    </div> 
         <div> -->
          <el-menu
            class="el-menu-vertical-demo"
            router>
            <el-menu-item index="/Home/Course">
              <i class="el-icon-menu"></i>
              <span slot="title">课程</span>
            </el-menu-item>
            <el-menu-item index="/Home/Course">
              <i class="el-icon-edit"></i>
              <span slot="title">笔记</span>
            </el-menu-item>
            <el-menu-item index="/Home/Course">
              <i class="el-icon-cloudy"></i>
              <span slot="title">云盘</span>
            </el-menu-item>
            <el-menu-item index="/Home/Course">
              <i class="el-icon-collection-tag"></i>
              <span slot="title">联系我们</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-main style="padding: 0px;margin-left: 20px;margin-right: 20px">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import HeadTabar from "../../components/HomeTaber/HeadTabar";

export default {
  name: "Home",
  data() {
    return {
      headImg: localStorage.getItem('userHead'),
      name: localStorage.getItem("userName"),
      imgUrl: require("@/assets/qrcode.jpg")
    }
  },
  components: {
    HeadTabar
  },
  methods:{
    extractColorByName(name) {
	      var temp = [];
	      temp.push("#");
	      for (let index = 0; index < name.length; index++) {
	        temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
	      }
	      return temp.slice(0, 5).join('').slice(0, 4);
	    },
  }
}
</script>

<style scoped>
#home {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #d6d6d6;
}

.user {
  /* background-image: url("../../assets/backgroundimg.jpeg"); */
  background-size: 100% 100%;
}
</style>
